/* eslint-disable */
<template>
  <div :v-loading="listLoading" class="app-container">
    <div class="handle-content">
      <el-input v-model="handleId" placeholder="请输入店铺ID" style="width: 300px;">
        <el-button slot="append" @click="search">查询</el-button>
      </el-input>
    </div>
    <fieldset>
      <legend> [1]. 店铺信息 </legend>
      <el-form label-position="left" label-width="200px" :model="store">
        <el-form-item label="店铺ID: ">
          {{ store.id }}
        </el-form-item>
        <el-form-item label="店铺名字: ">
          {{ store.title }}
        </el-form-item>
        <el-form-item label="店铺描述: ">
          {{ store.describe }}
        </el-form-item>
        <el-form-item label="店铺负责人: ">
          {{ store.name }}
        </el-form-item>
        <el-form-item label="电话: ">
          {{ store.phone }}
        </el-form-item>
        <el-form-item label="店铺状态: ">
          {{ store.status_cn }}
        </el-form-item>
        <el-form-item label="创建时间: ">
          {{ store.created_at }}
        </el-form-item>
      </el-form>
    </fieldset>

    <fieldset>
      <legend> [2]. 会员等级信息 </legend>
      <el-table v-loading="listLoading" :data="grade" element-loading-text="拼命加载中" :row-class-name="parentStyle" border fit highlight-current-row>
        <el-table-column label="所属店铺ID" align="center">
          <template slot-scope="scope">
            {{ scope.row.store_id }}
          </template>
        </el-table-column>
        <el-table-column label="会员等级" align="center">
          <template slot-scope="scope">
            {{ scope.row.level }}
          </template>
        </el-table-column>
        <el-table-column label="会员等级名字" align="center">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="等级描述" align="center">
          <template slot-scope="scope">
            {{ scope.row.describe }}
          </template>
        </el-table-column>
        <el-table-column label="前端显示类型(背景图片/渐变色)" align="center">
          <template slot-scope="scope">
            {{ scope.row.type_text }}
          </template>
        </el-table-column>
        <el-table-column label="背景图片地址 或 两个渐变色" align="center">
          <template slot-scope="scope">
            {{ scope.row.type_content }}
          </template>
        </el-table-column>
        <el-table-column label="购买要求" align="center">
          <template slot-scope="scope">
            {{ scope.row.buy }}
          </template>
        </el-table-column>
        <el-table-column label="推荐要求" align="center">
          <template slot-scope="scope">
            {{ scope.row.refer }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>
      </el-table>
    </fieldset>

    <fieldset>
      <legend> [3]. 分享经济信息 </legend>
      <el-form label-position="left" label-width="200px" :model="share">
        <el-form-item label="所属店铺ID: ">
          {{ share.store_id }}
        </el-form-item>
        <el-form-item label="分享级数: ">
          {{ share.num }} 级
        </el-form-item>
        <el-form-item label="分享方式: ">
          {{ share.method_cn }}
        </el-form-item>
        <el-form-item label="金额来源: ">
          {{ share.type_cn }}
        </el-form-item>
        <el-form-item label="比例: ">
          {{ share.radio_cn.text }}
        </el-form-item>
      </el-form>
    </fieldset>

    <fieldset>
      <legend> [4]. 团队奖励信息 </legend>
      <el-form label-position="left" label-width="200px" :model="team_award">
        <el-form-item label="所属店铺ID: ">
          {{ team_award.store_id }}
        </el-form-item>
        <el-form-item label="最小获得等级: ">
          {{ team_award.min_level_cn }}
        </el-form-item>
        <el-form-item label="总发放代数: ">
          最多 {{ team_award.all_num }} 代  (N级代数 + N级外代数)
        </el-form-item>
        <el-form-item label="N级代数: ">
          最多 {{ team_award.division_num }} 代
        </el-form-item>
        <el-form-item label="N级外代数: ">
          最多 {{ team_award.rela_num }} 代
        </el-form-item>
        <el-form-item label="总发放金额: ">
          最多 {{ team_award.all_price }} (N级内 + N级外)
        </el-form-item>
        <el-form-item label="N级内总发放金额: ">
          最多 {{ team_award.n_inner_price }} (订单金额*N级内总倍率)
        </el-form-item>
        <el-form-item label="N级外总发放金额: ">
          最多 {{ team_award.n_outer_price }} (订单金额*N级外倍率*N级外代数)
        </el-form-item>
        <el-form-item label="N级比例: ">
          {{ team_award.radio_inner_text }}
        </el-form-item>
        <el-form-item label="N级外统一比例 ">
          {{ team_award.radio_outer_text }}
        </el-form-item>
      </el-form>
    </fieldset>
  </div>
</template>

<script>
/* eslint-disable */
import { getStoreInfo, getList } from '@/api/store'
export default {
  data() {
    return {
      // 加载中
      listLoading: false,
      // 总数据数目
      total: 0,
      // 店铺ID
      handleId: '',
      store: {},
      grade: [],
      share: {'radio_cn': {'text': ''}},
      team_award: {}
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      console.log('getList')
      getStoreInfo({ id: this.handleId }).then(response => {
        console.log('getStoreInfo')
        console.log(response)
        var arr = response.data
        this.total = response.data.total
        this.listLoading = false

        this.store = arr.store
        this.grade = arr.grade.data
        this.share = arr.share
        this.team_award = arr.team_award
      })
    },
    search() {
      this.getList()
    },
    parentStyle({ row, rowIndex }) {
      if (row.pid === 0) {
        return 'success-row'
      }
      return 'warning-row'
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
    .handle-content{
        margin-bottom: 20px;
        .right{
            float: right;
        }
    }
}
</style>
<style>
fieldset{
  margin: 20px auto;
  padding: 10px;
}
</style>
